<template>
  <div class="prove p-2">
    <el-card>
      <div class="mb-[10px]">
        <el-form ref="ruleFormRef" :model="queryParams" :inline="true">
          <el-form-item label="创建时间" style="width: 408px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="开票流水号" prop="no" label-width="100">
            <el-input v-model="queryParams.no" placeholder="请输入开票流水号" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="企业名称" prop="mer_name">
            <el-input v-model="queryParams.mer_name" placeholder="请输入企业名称" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="服务商名称" label-width="82" prop="syd_name" v-if="!contentType">
            <el-input v-model="queryParams.syd_name" placeholder="请输入服务商名称" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="完税证明上传状态" prop="status" label-width="125" v-if="!contentType">
            <el-select v-model="queryParams.status" placeholder="请选择完税证明上传状态" clearable style="width: 270px">
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" prop="busType" label-width="70" v-if="!contentType">
            <el-select v-model="queryParams.busType" placeholder="请选择业务类型" clearable style="width: 270px">
              <el-option v-for="dict in sys_busType_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="wayInvoicelist('search')">搜索</el-button>
            <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
            <a class="btn-nav"  @click="contentType = !contentType">
              <span
                v-if="contentType"

                >高级模式
                <i data-v-771b1fc0="" aria-label="图标: down" class="anticon anticon-down"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="down"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                    ></path></svg></i
              ></span>
              <span
                v-if="!contentType"
                >精简模式
                <i data-v-771b1fc0="" aria-label="图标: up" class="anticon anticon-up"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="up"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
                    ></path></svg></i
              ></span>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table ref="roleTableRef" v-loading="loading" border :data="invoiceDatalist">
          <el-table-column label="创建时间" align="center" prop="addTime" width="180" />
          <el-table-column label="开票流水号" align="center" width="210">
            <template #default="scope">
              <el-tooltip :content="scope.row.no" raw-content placement="bottom" effect="light">
                  <div line-clamp="1" truncated>
                    {{ scope.row.no }}
                  </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="批次流水号" align="center" width="200" >
            <template #default="scope">
              <el-tooltip :content="scope.row.billNos" raw-content placement="bottom" effect="light">
                  <div line-clamp="1" truncated>
                    {{ scope.row.billNos }}
                  </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="企业名称" align="center" prop="merName" show-overflow-tooltip width="240" />
          <el-table-column label="服务商名称" align="center" prop="sydName" show-overflow-tooltip width="240" />


          <el-table-column label="业务类型" align="center" width="120">
            <template #default="scope">
              <div>
                 <span v-if="scope.row.busType == 1">委托代征</span>
                 <span v-else-if="scope.row.busType == 2">自然人代开</span>
                 <span v-else-if="scope.row.busType == 3">个体户注册</span>
                 <span v-else-if="scope.row.busType == 4">临时税务登记</span>
                 <span v-else-if="scope.row.busType == 5">资金代发</span>
                 <span v-else-if="scope.row.busType == 6">派遣&外包</span>
                 <span v-else></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发票类型" align="center" width="130">
            <template #default="scope">
              <div>
                <span v-if="scope.row.type == 1">增值税专用发票</span>
                <span v-else-if="scope.row.type == 2">增值税普通发票</span>
                <span v-else-if="scope.row.type == 3">差额票</span>
                <span v-else></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="开票项目" align="center" prop="category" width="220" />
          <el-table-column label="开票金额" align="center" prop="invAmount" width="180" >
            <template #default="scope">
                {{proxy?.convertFenToYuan(scope.row.invAmount)  }}
            </template>
          </el-table-column>
          <el-table-column label="签收状态" align="center" width="140">
            <template #default="scope">
              <div>
                <span v-if="scope.row.iogisticsStatus == 1">未寄出</span>
                <span v-else-if="scope.row.iogisticsStatus == 2">未签收</span>
                <span v-else-if="scope.row.iogisticsStatus == 3">已签收</span>
                <span v-else></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="签收时间" align="center" prop="iogisticsReceivingTime" width="220" />
          <el-table-column label="备注" align="center" prop="remark" width="140" />

          <el-table-column fixed="right" label="操作" align="center" prop="roleName" :width="operColWidth">
            <template #default="scope">
              <el-tag type="primary" plain size="small" link @click="handleinfolist(scope.row)">详情</el-tag>
              <el-tag type="success" v-if="roleId == 6  && scope.row.iogisticsStatus == 1" plain size="small" link @click="up(scope.row)">添加快递</el-tag>
              <el-tag type="success"  v-if="roleId == 6 && scope.row.iogisticsStatus == 2 "  plain size="small" link @click="np(scope.row)">修改快递</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block mt-[20px]">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :small="false"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup name="prove" lang="ts">
import { useTransition } from '@vueuse/core'
import { ref , toRefs , reactive , onMounted} from 'vue';
import { invoicelist} from '@/api/invoice/record/index'
import type { FormInstance } from 'element-plus'
import useUserStore from '@/store/modules/user'


 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const operColWidth  = ref(130)
const data = reactive({
  queryParams: {
    no:'',
    status: '',
    busType:'',
    syd_name:'',
    mer_name:'',
    pageSize:10,
    pageNum:1,
    status : 2,
    orderByColumn:'',
    isAsc:'',
    roleName: ''
  }
});
const { queryParams } = toRefs(data);
const contentType = ref(true) // true 精简模式 , false 高级模式

// 完税证明上传状态选择
const sys_normal_disable = ref([
  {
    value: 1,
    label: '待开票'
  },{
    value: 2,
    label: '已开票'
  },{
    value: 3,
    label: '已取消'
  },{
    value: 4,
    label: '驳回'
  },{
    value: 5,
    label: '开票中'
  }
])
// 业务类型
const sys_busType_disable = ref(
 [ {
    value:1,
    label:'委托代征'
  },{
    value:2,
    label:'自然人代开'
  },{
    value:3,
    label:'个体户注册'
  },{
    value:4,
    label:'临时税务登记'
  },{
    value:5,
    label:'资金代发'
  },{
    value:6,
    label:'派遣&外包'
  }]
)
// 倒计时用例
const countdowndz = ref(60)
const outputValue = useTransition(countdowndz, {
  duration: 60000,
})
countdowndz.value = 0
const staticticStyle = ref({
  color:'#999',
  fontSize:'13px'
})

// 数据列表用例
const loading = ref(false)   //加载动画
const dateRange = ref<[DateModelType, DateModelType]>(['', ''])  //创建时间参数
const invoiceDatalist = ref([])   //获取到的数据列表
const total = ref(0)
const wayInvoicelist = async (event) => {
  if(event == 'search'){
    queryParams.pageNum = 1
  }
  loading.value = true
  let objdata = queryParams.value
  objdata['params[syd_name]'] = objdata.syd_name || ''
  objdata['params[mer_name]'] = objdata.mer_name || ''
  objdata['params[begin_time]'] = dateRange.value[0]
  objdata['params[end_time]'] = dateRange.value[1]
  console.log('wayInvoicelist_参数',queryParams.value)
  const res = await invoicelist(queryParams.value)
  console.log('wayInvoicelist_返回值',res)
  invoiceDatalist.value = res.rows
  total.value = res.total
  loading.value = false
}
const handleSizeChange = ()=>{
  wayInvoicelist()
}
const handleCurrentChange = ()=>{
  wayInvoicelist()
}
// 重置
const ruleFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dateRange.value = ['','']
  queryParams.pageNum = 1
  wayInvoicelist()
}
// 路由跳转
const handleinfolist = (row) => {
  // 跳转到详情
  router.push({
    path:"/invoice/infolist",
    query:{
      id:row.id
    }
  });
}


const up = (row:any)=>{
  // 跳转到详情
  router.push({
    path:"/invoice/infolist",
    query:{
      id:row.id,
      type:'addKd'
    }
  });
}


// 路由跳转
const np = (row:any) => {
  // 跳转到详情
  router.push({
    path:"/invoice/infolist",
    query:{
      id:row.id,
      type:'mdyKd'
    }
  });
}


const roleId  = ref();
onMounted(()=>{
  let curRoleId = useUserStore().curRoleId;
  roleId.value = curRoleId;
  if(roleId.value == 6){
    operColWidth.value = 230;
  }
  wayInvoicelist()
})


</script>
<style lang="scss" scoped>
.prove {
  background-color: #eef0f3;
  .flexdown{
    display: flex;
    align-items: center;
    color: #999999;
  font-size: 13px;
    justify-content:center;
  }
  .demo-pagination-block {
    float: right;
    padding-bottom: 20px;
  }
  .btn-nav {
    margin-left: 8px;
    & {
      color: #1890ff;
      text-decoration: none;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    .anticon {
      display: inline-block;
      color: inherit;
      font-style: normal;
      line-height: 0;
      text-align: center;
      text-transform: none;
      vertical-align: -0.125em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
  }
}
</style>
